/* =========================================================================
   📱 MOBILE MENU MODULE — FOLDER: navigation/menu mobile/
   Namespace: PREFIX `.mm-` (singkatan Mobile Menu)
   ==============================================================
   ⚠️ ATURAN SAFETY (JANGAN DIUBAH):
   ✅ TIDAK PAKAI selector existing `.mobile-bottom-nav` / `.mobile-nav` → 0% bentrok!
   ✅ Module TIDAK AKTIF OTOMATIS. Harus panggil manual window.MobileMenuModule.render()
   ✅ Specificity selalu diawali `.mm-` (tidak override styling existing)
   ==============================================================
   2 Komponen module:
   1) .mm-bottom-bar      = Bottom Navigation 4 tombol (Menu | Demos | Hot | Tools)
   2) .mm-drawer          = Sidebar Drawer Mobile (bukan sidebar desktop!)
   3) .mm-spacer          = Spacer 74px agar content tidak tertutup bottom bar
   ========================================================================= */

/* ===================== ROOT VARIABLES MODULE (hanya untuk module) ===================== */
:root {
  --mm-height: 72px;            /* tinggi bottom nav */
  --mm-bg: rgba(9,7,29,0.96);   /* background bottom nav */
  --mm-border-top: 1px solid rgba(148,163,184,0.08);
  --mm-icon-size: 22px;
  --mm-font-size: 0.64rem;
  --mm-font-weight: 600;
  --mm-radius-btn: 10px;
  --mm-active-bg: rgba(124,92,255,0.14);   /* active ungu SPINDEX */
  --mm-active-color: #ffffff;
  --mm-color: var(--color-text-secondary, #9ca3af);
  --mm-active-icon: #ec4899;                /* pink SPINDEX */
  --mm-z: 999;                      /* bottom nav z index */
  --mm-drawer-z: 199;               /* drawer z-index (di atas overlay) */
  --mm-drawer-width: 320px;         /* ⬆️ Diperbesar 290 → 320px (zoom lebih lega) */
  /* Drawer items vars: */
  --mm-item-radius: 14px;
  --mm-icon-box-size: 62px;         /* ⬆️ Kotak ikon BESAR SEKALI 52 → 62px */
  --mm-icon-box-icon: 34px;         /* ⬆️ Icon dalam kotak 26 → 34px LEBIH BESAR! */
  --mm-item-font: 1.55rem;          /* ⬆️ Label BESAR BOLD putih 1.35→1.55rem */
  --mm-grad-border: linear-gradient(135deg, #ec4899 0%, #8b5cf6 55%, #6366f1 100%);  /* pink→ungu gradient border */
  --mm-grad-border-soft: linear-gradient(135deg, rgba(236,72,153,0.65) 0%, rgba(139,92,246,0.7) 100%);
}

/* ===================== (1) SPACER CONTENT ===================== */
.mm-spacer {
  display: none;   /* DEFAULT HIDDEN (jika modul tidak diaktifkan, tidak makan ruang) */
  height: calc(var(--mm-height) + env(safe-area-inset-bottom, 0px));
  width: 100%;
  flex-shrink: 0;
}

/* ===================== (2) BOTTOM NAVIGATION BAR ===================== */
.mm-bottom-bar {
  display: none;                  /* DEFAULT HIDDEN — modul tidak aktif = tidak muncul */
  position: fixed;
  z-index: var(--mm-z);
  bottom: 0; left: 0; right: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 6px calc(env(safe-area-inset-bottom) + 4px) 10px;
  background: var(--mm-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: var(--mm-border-top);
  transform: translateZ(0);
  will-change: transform;
}

/* === BUTTON STYLE MODULE (prefix mm-btn) === */
.mm-btn {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.35rem 0.25rem;
  border-radius: var(--mm-radius-btn);
  color: var(--mm-color);
  font-size: var(--mm-font-size);
  font-weight: var(--mm-font-weight);
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  font-family: inherit;
  line-height: 1.35;
  text-decoration: none;
  transition: all 200ms ease;
}
.mm-btn:hover { background: rgba(255,255,255,0.04); color: #ffffff; text-decoration: none; }
.mm-btn.mm-active { color: var(--mm-active-color); background: var(--mm-active-bg); }
.mm-btn svg {
  width: var(--mm-icon-size);
  height: var(--mm-icon-size);
  margin: 0 auto;
  flex-shrink: 0;
}
.mm-btn.mm-active svg { color: var(--mm-active-icon); }
/* Spesifik Icon Menu (toggle drawer) */
.mm-btn[data-action="toggle-drawer"] { -webkit-tap-highlight-color: transparent; }

/* ===================== (3) DRAWER SIDEBAR MOBILE MODULE ===================== */
.mm-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: calc(var(--mm-drawer-z) - 1);
  background: rgba(5,3,20,0.6);
  backdrop-filter: blur(4px);
  animation: mm-fadein 200ms ease-out;
}
.mm-drawer {
  display: none;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: var(--mm-drawer-z);
  width: var(--mm-drawer-width);
  max-width: 82vw;
  height: 100vh;
  background: var(--color-surface-1, #0c0a20);
  border-right: 1px solid rgba(255,255,255,0.06);
  transform: translateX(-105%);
  transition: transform 300ms cubic-bezier(.2,.9,.3,1);
  padding-bottom: calc(var(--mm-height) + 20px);
  overflow-y: auto;
  overflow-x: hidden;
}
.mm-drawer.mm-open { transform: translateX(0); }
.mm-drawer.mm-open + .mm-drawer-overlay { display: block; }

/* ==========================================================
   ✅ FLEX COLUMN SOLUTION — HEADER DRAWER TETAP DI ATAS 100% WORK!
   ==========================================================
   GAGAL pakai position:sticky (karena overflow-y auto di parent dan browser
   mobile implementasi terbatas). GANTI struktur:
   • aside.mm-drawer  = display:flex; flex-direction:column; (TIDAK ADA overflow!)
   • .mm-drawer-header= flex-shrink:0 (TIDAK mengecil, TETAP DI ATAS SELALU!)
   • .mm-drawer-body  = flex:1 (sisa tinggi) + overflow-y: auto (HANYA AREA INI YANG SCROLL!)
   Hasil: Header logo + Close X TIDAK PERNAH ikut tergulung, user bisa close kapanpun!
*/
aside.mm-drawer, body.mm-active aside.mm-drawer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important; /* OVERFLOW di REMOVE dari drawer. Pindah ke body wrapper! */
  padding-bottom: 0 !important;
  padding: 0 !important;
}
.mm-drawer-header {
  /* flex column child: TETAP DI ATAS, TIDAK BOLEH di scroll! */
  position: relative !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px 14px 20px !important;
  margin: 0 0 0 0 !important;
  background-color: #0c0a20 !important;
  background-image: linear-gradient(180deg, #0e0b24 0%, #0c0a20 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: saturate(150%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(10px) !important;
  min-height: 62px !important;
  height: 62px !important;
  max-height: 62px !important;
  box-sizing: border-box !important;
}
/* ===== DRAWER BODY (AREA SCROLL HANYA DISINI!) — nav list dibungkus ini ===== */
.mm-drawer-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;     /* required agar flex child scrollable! */
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  box-sizing: border-box !important;
  padding: 6px 10px 10px 10px !important;    /* ⬆️ NAIKAN LAGI! padding top 14 → 6px (gap header dikurangi 8px!) */
}
.mm-drawer-logo {
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 900 !important;
  background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #6366f1 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  font-size: 1.55rem !important;
  letter-spacing: -0.02em;
  line-height: 1;
}
.mm-drawer-close {
  all: unset !important;
  cursor: pointer !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  transition: transform 140ms ease, background-color 140ms ease !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent;
}
.mm-drawer-close:hover { background: rgba(139,92,246,0.16); transform: rotate(90deg); }
.mm-drawer-close:active { transform: scale(0.92); }
.mm-drawer-close svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  color: #fff;
}
/* Nav list berada di dalam .mm-drawer-body */
.mm-drawer-nav { padding-top: 0 !important; margin: 0 !important; }   /* ⬆️ NAIKAN LAGI! padding-top 4 → 0! (total hemat 4px) */
.mm-section-item { margin: 14px 6px 8px 10px !important; }           /* ⬆️ section jarak 18 → 14 atas */

/* ==========================================================
   🚫 DOUBLE SCROLLBAR BUG FIX — SAAT DRAWER OPEN: HALAMAN UTAMA DI BEKU!
   ==========================================================
   Sebelumnya: drawer terbuka -> scrollbar drawer body MUNCUL (1) + scrollbar
   html/body halaman utama MASIH ADA (2) -> TERJADI DOUBLE scroll bar di kanan!
   Solusi: class html.mm-drawer-open = overflow:hidden TOTAL di root element HTML
   (bukan cuma body! Karena overflow:hidden di body TIDAK hilangkan scrollbar root).
   Scrollbar HANYA TINGGAL 1: area .mm-drawer-body untuk items nav!
   + padding-right: var(--scrollbar-w) — via CSS variable dari JS! Tidak bisa di-overwrite.
*/
html.mm-drawer-open,
html.mm-drawer-open body {
  overflow: hidden !important;
  height: 100% !important;
  position: relative !important;
  touch-action: none !important;           /* mobile: disable swipe scroll di luar drawer */
  overscroll-behavior: none !important;    /* mencegah scroll chain ios/android */
  /* 📏 PREVENT LAYOUT SHIFT: Ruang kosong yang tadinya scrollbar → diisi padding-right otomatis!
     JS set document.documentElement.style.setProperty('--scrollbar-w', '10px').
     CSS !important di sini JAMINAN TIDAK BERUBAH meskipun inline style di reset! */
  padding-right: var(--scrollbar-w, 0px) !important;
}
/* App-header (fixed) juga TIDAK BOLEH bergeser. */
html.mm-drawer-open .app-header {
  /* Kanan app-header harus mundur sejauh scrollbar width (karena body dipadding kanan) */
  right: var(--scrollbar-w, 0px) !important;
  width: auto !important;
}
/* ⚠️ FORCE SPECIFICITY DRAWER MODULE — TIDAK BOLEH DI-OVERRIDE SIDEBAR EXISTING! */
body.mm-active aside.mm-drawer,
aside.mm-drawer {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 320px !important;
  max-width: 320px !important;
  min-width: 320px !important;
  height: 100vh !important;
  background: #0c0a20 !important;
  /* 🚨 FLEX COLUMN LAYOUT = HEADER STICKY + HANYA BODY YANG SCROLL!
     Parent DRAWER SAMA SEKALI TIDAK BOLEH ADA OVERFLOW-Y AUTO!
     Akan menyebabkan DOUBLE scrollbar (parent + child .mm-drawer-body) = "double luar dalam" user! */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;          /* ❗ PENTING! Parent = overflow HIDDEN total. */
  padding: 0 !important;                /* flex child atur padding sendiri-sendiri */
  margin: 0 !important;
  transform: translateX(-105%) !important;
  transition: transform 300ms cubic-bezier(.2,.9,.3,1) !important;
  z-index: 9999 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 20px 0 60px -20px rgba(139, 92, 246, 0.45);
}

/* ==========================================================
   🔒 FINAL HIDE NATIVE SCROLLBAR VISUAL (mencegah sisa-sisa double garis)
   ==========================================================
   Tetap bisa di-scroll via mousewheel / jari mobile.
   Hanya garis indikator visual WebKit/Firefox yang dihilangkan!
   100% work untuk user mobile (touch interface = tidak butuh indikator scrollbar).
*/
aside.mm-drawer::-webkit-scrollbar,
.mm-drawer-body::-webkit-scrollbar,
html.mm-drawer-open::-webkit-scrollbar,
html.mm-drawer-open body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
aside.mm-drawer,
.mm-drawer-body,
html.mm-drawer-open,
html.mm-drawer-open body {
  -ms-overflow-style: none !important;  /* IE 10+ / Edge Legacy */
  scrollbar-width: none !important;     /* Firefox 64+ */
}
/* ✅ SAAT DRAWER TERBUKA (class mm-open) POSISI X = 0 */
body.mm-active aside.mm-drawer.mm-open,
aside.mm-drawer.mm-open { transform: translateX(0) !important; }

/* ==========================================================
   🔒 1. SAFETY SAAT MODUL AKTIF (mm-active): Sembunyikan SIDEBAR & BOTTOM NAV EXISTING!
   ==========================================================
   Alasan: agar user click bottom nav Menu TIDAK terbuka sidebar icononly LAMA (80px, cuma icon).
   GANTI 100% pakai modul baru (drawer 290px + label). */
body.mm-active .mobile-bottom-nav,
body.mm-active .mobile-bottom-spacer {
  display: none !important;
}
body.mm-active #home-sidebar-wrap,
body.mm-active .home-sidebar,
body.mm-active aside.sidebar,
body.mm-active .sidebar-desktop {
  display: none !important;
}
body.mm-active { --sidebar-width: 0px; --content-pad-left: 0px; }
body.mm-active .mm-spacer { display:block !important; }

/* ==========================================================
   🔒 2. ⚡ MODULE-ONLY HIDE via @media query + body.mm-active prefix!
   ==========================================================
   ⚠️ DIPERBAIKI: SEBELUMNYA rule TANPA prefix body.mm-active = SELALU hide
      sidebar & bottom nav LAMA walau modul TIDAK aktif! Ini biang masalah
      drawer transparan kacau (sistem LAMA di-hide paksa tapi drawer MODUL
      BARU tidak dirender karena AUTO START sudah dimatikan).
   SEKARANG: Hanya hide SISTEM LAMA JIKA class .mm-active ada di body
             (modul MobileMenuModule di-enable MANUAL via .enable()).
   Jika .mm-active TIDAK ADA → SISTEM LAMA (drawer open/close ./toggle.js + shared-ui bottom nav)
   TETAP BEKERJA NORMAL seperti SEMULA. */
@media (max-width: 1023px) {
  body.mm-active .mobile-bottom-nav,
  body.mm-active .mobile-bottom-spacer {
    display: none !important;
  }
  body.mm-active #home-sidebar-wrap,
  body.mm-active .home-sidebar,
  body.mm-active aside.sidebar,
  body.mm-active .sidebar-desktop,
  body.mm-active #sidebar-toggle-btn,
  body.mm-active .sidebar-toggle {
    display: none !important;
  }
  body.mm-active,
  body.mm-active html { --sidebar-width: 0px; --content-pad-left: 0px; }
  /* Spacer mobile bottom bar modul HANYA muncul JIKA mm-active */
  body.mm-active .mm-spacer { display: block !important; }
}

.mm-drawer-logo {
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 900;
  font-size: 1.4rem;
  background: linear-gradient(90deg, #ec4899 0%, #8b5cf6 55%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
  margin: 0;
}
.mm-drawer-close {
  width: 38px !important;
  height: 38px !important;
  padding: 7px !important;
  border-radius: 10px !important;
  color: #cbd5e1;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-drawer-close:hover { background: rgba(236,72,153,0.14) !important; color: #ffffff !important; }
.mm-drawer-close svg { width: 18px !important; height: 18px !important; }

/* ==========================================================
   🧭 DRAWER NAVIGATION LIST — MODEL SPINDEX (ICON BOX TETAP ADA!)
   ========================================================== */
.mm-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;               /* jarak antar item lebih rapat seperti spindex */
  padding: 6px 10px 30px 8px;
  margin: 0;
  list-style: none;
}

/* ---- Section Label (DISCOVER / LIVE CASINO / ANALYTICS / TOOLS) ---- */
.mm-section-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;        /* lebih lega tapi tidak berlebihan */
  color: #60657a;                /* abu slate + ungu subtle sesuai spindex */
  text-transform: uppercase;
  margin: 22px 10px 10px 16px;
  padding: 0;
  user-select: none;
  opacity: 0.85;
}
.mm-section-label:first-of-type { margin-top: 4px; }   /* ⬆️ NAIKAN LAGI! section pertama 10 → 4px (NAIK 6px!) */

/* ---- Individual Nav Item (flex row: icon box TETAP + label) ---- */
.mm-nav-item {
  all: unset;            /* reset tag button / a */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;                          /* ⬆️ gap ikon → label 15→18 (lega) */
  padding: 18px 18px 18px 16px !important;       /* ⬆️ padding 12→18 (zoom lebih gede) */
  border-radius: 14px !important;                /* Spindex: rounded kecil tidak terlalu lebar */
  color: #ffffff !important;
  font-family: var(--font-display, system-ui, sans-serif) !important;
  font-size: 1.55rem !important;                 /* ⬆️ FONT LEBIH BESAR! 1.18 → 1.55rem */
  font-weight: 800 !important;                   /* ⬆️ weight extra bold 700→800 */
  letter-spacing: -0.005em !important;
  line-height: 1.12 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 160ms ease, transform 160ms ease !important;
  /* ❌ HAPUS BORDER GRADIENT LUAR CARD ITEM (sesuai spindex clean) */
  border: 1px solid transparent !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  text-decoration: none !important;
  min-height: 72px !important;                   /* ⬆️ MIN HEIGHT 54 → 72px! (row lebih tinggi click area besar) */
}
/* 👇 LABEL: WAJIB MUNCUL — TIDAK BOLEH DIHIDE SAMA SEKALI PUN rule existing 👇 */
.mm-nav-item .mm-nav-label,
.mm-nav-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #e9ebff !important;                 /* putih agak biru sesuai spindex */
  flex: 1 1 auto !important;
  flex-shrink: 0 !important;
  min-width: 0;
  text-align: left !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
/* 👇 ✅ ICON BOX TETAP ADA! KOTAK GRADIENT DIPERTAHANKAN sesuai user minta "icon box tetap"!
   Dikecilkan 52 → 44px agar proporsi sama seperti spindex.
*/
.mm-nav-item .mm-icon-box,
.mm-icon-box {
  flex-shrink: 0 !important;        /* ICON TIDAK BOLEH DIPERKEKILKAN! */
  flex-grow: 0 !important;
  width: 62px !important;          /* ⬆️ BESAR SEKALI! 44 → 62px (icon box ZOOM!) */
  height: 62px !important;         /* ⬆️ Kotak icon BESAR */
  display: flex !important;
}
.mm-nav-item:hover {
  background: rgba(124, 92, 255, 0.08);
  transform: translateX(1px);
}
/* ✅ Active item SPINDEX: cuma bg subtle rounded, TANPA border gradient luar, TANPA indicator kiri! */
.mm-nav-item.mm-active {
  background: rgba(80, 70, 140, 0.32);        /* bg ungu-dark subtle tanpa gradien border */
  border-color: transparent;
  box-shadow: none;                            /* hapus glow luar */
}
/* ❌ HAPUS indicator pink bar di sebelah kiri (model spindex tidak punya) */
.mm-nav-item.mm-active::before {
  display: none !important;
}
/* Label active item lebih putih cerah */
.mm-nav-item.mm-active .mm-nav-label { color: #ffffff !important; }

/* ===== ✅ ITEM SOON (Guides) = disable click, styling abu opacity 60% ===== */
.mm-nav-item.mm-soon {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important; /* allow click handler agar bisa block navigate manual */
  filter: grayscale(20%);
}
.mm-nav-item.mm-soon:hover {
  background: transparent !important;
  transform: none !important;
}
/* BADGE SOON: rounded ungu-biru text putih di kanan label */
.mm-soon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, #5b4bd8 0%, #6d63e6 50%, #7e69ff 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-display, system-ui, sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  box-shadow: 0 4px 14px -6px rgba(109, 99, 230, 0.65) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  margin: 0 !important;
}

/* ---- ✅ ICON BOX: Kotak rounded DENGAN BORDER GRADIENT pink→ungu (TETAP ADA SESUAI USER!) ---- */
/* TECHNIQUE: "fake border gradient" pakai 2 layer (outer sebagai gradient, inner sebagai bg box) */
.mm-icon-box {
  flex-shrink: 0;
  width: 62px;                   /* ⬆️ BESAR SEKALI! 44 → 62px */
  height: 62px;                  /* ⬆️ BESAR SEKALI! */
  border-radius: 14px;            /* ⬆️ radius 12→14px agar proporsional */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* LAYER OUTER BACKGROUND = GRADIENT (yang akan jadi "border" 2px) — TETAP ADA! */
  background: var(--mm-grad-border);
  padding: 2.5px;                 /* ketebalan border gradient = 2.5px agar jelas */
  box-shadow: 0 8px 22px -10px rgba(139,92,246,0.62);
}
/* INNER LAYER = background box gelap (menutupi gradient kecuali pinggir 2px) */
.mm-icon-box::after {
  content: "";
  position: absolute;
  inset: 2px;                   /* Sama dengan padding luar = 2px */
  border-radius: calc(var(--mm-item-radius, 14px) - 2px);
  background: #0e0b23;          /* warna dalam kotak ikon, sesama surface drawer tapi lebih gelap */
  z-index: 0;
}
.mm-icon-box svg {
  position: relative;
  z-index: 1;                   /* muncul di atas inner layer */
  width: var(--mm-icon-box-icon, 34px);  /* ⬆️ 26 → 34px ICON LEBIH Gede! */
  height: var(--mm-icon-box-icon, 34px); /* ⬆️ 26 → 34px ICON LEBIH Gede! */
  /* Warna icon = GRADIENT PINK → UNGU */
  color: #ec4899;
  stroke: url(#mm-grad-icon) !important;
}
/* Active item: warna icon lebih cahaya + box sedikit lebih bright */
.mm-nav-item.mm-active .mm-icon-box {
  filter: brightness(1.06) saturate(1.15);
  transform: scale(1.02);
  box-shadow: 0 8px 26px -8px rgba(236,72,153,0.65);
}
/* Fallback stroke warna gradien kalau SVG stroke tidak support url gradient, inject via CSS inline fallback */
.mm-icon-box svg * { stroke: #c084fc !important; }
.mm-icon-box svg line,
.mm-icon-box svg polyline,
.mm-icon-box svg path,
.mm-icon-box svg circle,
.mm-icon-box svg rect { stroke-width: 2 !important; stroke-linecap: round; stroke-linejoin: round; }

/* ==============================================================
   ✨ MODERN DRAWER FOOTER (palem bawah setelah section nav items)
   ============================================================== */
.mm-drawer-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;                    /* ✅ GAP 12 → 10px lagi dikurangi */
  padding: 14px 12px 8px 12px;    /* ✅ PADDING top 16→14, bottom 14→8 (bottom paling pendek) */
  margin: 6px 10px 0px 8px;      /* ✅ MARGIN top 10→6, BOTTOM 6 → 0 (MEPET! Tidak ada ruang bawah footer lagi!) */
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(30,26,65,0.32) 0%, rgba(14,11,35,0.0) 100%);
  position: relative;
}

/* --- [1] Divider Accent Gradient Pink-Ungu 1px tinggi --- */
.mm-footer-divider {
  width: 100%;
  height: 1px;
  min-height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 72, 153, 0.55) 20%,
    rgba(139, 92, 246, 0.75) 50%,
    rgba(99, 102, 241, 0.55) 80%,
    transparent 100%
  );
  opacity: 0.9;
  border: none;
}

/* --- [2] Socials 3 Icon BULAT (border gradient style seperti icon-box) --- */
.mm-footer-socials {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;              /* ✅ GAP SOCIAL DIKURANGI dari 14 → 10px */
  flex-wrap: wrap;
  padding: 0 !important;     /* ✅ PADDING socials DIHAPUS 2px → 0 */
}
.mm-social-icon {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;               /* ✅ UKURAN ICON DIKURANGI dari 40 → 36px */
  height: 36px;                /* ✅ UKURAN ICON DIKURANGI */
  border-radius: 50%;
  position: relative;
  background: var(--mm-grad-border);
  padding: 2px;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease, filter 200ms ease;
  box-shadow: 0 6px 18px -10px rgba(139,92,246,0.55);
  -webkit-tap-highlight-color: transparent !important;
  text-decoration: none;
}
/* INNER LAYER: surface gelap bulat (menutupi gradient kecuali pinggir 2px) */
.mm-social-icon::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #0e0b23;
  z-index: 0;
}
/* SVG icon di dalam (posisi relative agar z-index > layer inner gelap) */
.mm-social-icon-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-social-icon svg {
  width: 15px;
  height: 15px;
  color: #e9d5ff;                 /* ungu keemasan cerah */
  fill: currentColor;
  display: block;
}
/* HOVER EFFECT: glow pink + sedikit membesar (nyata dan jelas) */
.mm-social-icon:hover {
  transform: scale(1.09) translateY(-1.5px);
  filter: brightness(1.1) saturate(1.2);
  box-shadow: 0 12px 30px -10px rgba(236, 72, 153, 0.75),
              0 4px 14px -6px rgba(139, 92, 246, 0.6);
}
.mm-social-icon:hover svg {
  color: #ffffff;
}

/* --- [3] Info Bar: Copyright (kiri) + Version Badge (kanan) --- */
.mm-footer-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;                     /* ✅ GAP DIKURANGI: 10 → 6px */
  padding: 0 !important;        /* ✅ PADDING 0 2 → DIHAPUS */
  flex-wrap: wrap;
}
/* Copyright text kecil subtle */
.mm-footer-copyright {
  font-size: 0.66rem;            /* ✅ LEBIH KECIL: 0.7rem → 0.66rem (≈11px) */
  font-family: var(--font-display, system-ui, sans-serif);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: #7b7f9a;                        /* abu slate subtle, tidak mencuri perhatian */
  opacity: 0.95;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  user-select: text;
}
/* Version Badge mini rounded ungu glow di kanan */
.mm-footer-version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.5px 8px !important;   /* ✅ LEBIH KECIL PADDING: 3 9 → 2.5 8 */
  border-radius: 999px;                   /* pill shape */
  background: linear-gradient(90deg, rgba(236,72,153,0.18) 0%, rgba(124,58,237,0.22) 100%);
  border: 1px solid rgba(139,92,246,0.28);
  color: #c4b5fd;
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 0.62rem;             /* ✅ LEBIH KECIL 0.66 → 0.62rem */
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* ===================== ANIMASI ===================== */
@keyframes mm-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ===================== RESPONSIF VISIBILITY MODULE =====================
   Rule ini KEHIDUPAN MODULE — kapan bottom bar muncul?
   SAMA PERSIS dengan aturan global yang sudah dikunci user (0-1023 show, ≥1024 hide)
   tapi hanya BERLAKU JIKA module DI-ENABLE dengan class <body class="mm-active"> */

/* === TABLET BESAR & MOBILE: Module aktif = SHOW === */
body.mm-active .mm-bottom-bar { display: grid !important; }
body.mm-active .mm-spacer { display: block !important; }

/* === DESKTOP ≥1024px: Module aktif pun TIDAK SHOW (pakai sidebar desktop) — SPECIFICITY TERTINGGI LAYER PROTEKSI EKSTRA! === */
@media (min-width: 1024px) {
  html body.mm-active .mm-bottom-bar,
  html body .mm-bottom-bar,
  html body nav.mm-bottom-bar { display: none !important; }
  html body.mm-active .mm-spacer,
  html body .mm-spacer,
  html body .mobile-bottom-spacer { display: none !important; }
  html body.mm-active .mm-drawer,
  html body .mm-drawer,
  html body .mobile-drawer { display: none !important; }
  html body.mm-active .mm-drawer-overlay,
  html body .mm-drawer-overlay,
  html body .drawer-open { display: none !important; }
  /* Sembunyikan LEGACY mobile-bottom-nav di desktop juga agar TIDAK DAPAT muncul 1 frame flash */
  html body .mobile-bottom-nav,
  html body nav.mobile-bottom-nav,
  html body .legacy-mobile-bottom { display: none !important; }
}


/* =========================================================
   [MIGRATED] MOBILE DRAWER POSITION + BACKDROP
   (Mobile drawer translateX(-105%), drawer-open, backdrop blur, stop above bottom-nav)
   ========================================================= */
/* Sidebar utama (SEMUA halaman pakai ini sebagai base):
   position: fixed → keluar flow dokumen, menutupi area kiri 230px.
   top: 64px → TEPAT di bawah header (hamburger + logo), 0px gap. */
#home-sidebar-wrap.home-sidebar,
.home-sidebar {
  position: fixed;
  top: var(--nav-header-height);
  left: 0;
  bottom: 0;
  z-index: var(--nav-sidebar-z);
  width: var(--nav-sidebar-width);
  background: var(--color-bg-primary, #0b0a1f);
  border-right: 1px solid var(--nav-sidebar-border);
  overflow-y: auto;
  overflow-x: hidden;
  transition:
    width 220ms cubic-bezier(.4,0,.2,1),
    transform 220ms cubic-bezier(.4,0,.2,1),
    box-shadow 220ms ease,
    background 220ms ease;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 24px;
}

/* Toggle icon-only mode → width 80px */
#home-sidebar-wrap.home-sidebar.sidebar-icononly,
.home-sidebar.sidebar-icononly {
  width: var(--nav-sidebar-width-collapsed);
}

/* Mobile drawer overlay (di < 1024px) – SPINDEX style: 78% width, TIDAK tutupi bottom-nav */
@media (max-width: 1023px) {
  #home-sidebar-wrap.home-sidebar,
  .home-sidebar {
    transform: translateX(-105%);
    width: min(78vw, 360px) !important;
    /* FORCE EXPLICIT HEIGHT agar SELALU BERHENTI TEPAT di ATAS mobile-bottom-nav (72px + safe) */
    top: var(--nav-header-height) !important;
    bottom: auto !important;
    height: calc(100dvh - var(--nav-header-height) - var(--mobile-bottom-height, 72px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - var(--nav-header-height) - var(--mobile-bottom-height, 72px) - env(safe-area-inset-bottom, 0px)) !important;
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    padding-top: 0px !important;
    padding-bottom: 8px !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    box-sizing: border-box !important;
  }
  #home-sidebar-wrap.home-sidebar.drawer-open,
  .home-sidebar.drawer-open {
    transform: translateX(0);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    height: calc(100dvh - var(--nav-header-height) - var(--mobile-bottom-height, 72px) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - var(--nav-header-height) - var(--mobile-bottom-height, 72px) - env(safe-area-inset-bottom, 0px)) !important;
  }
  /* SAFETY OVERRIDE: jika drawer-open (mobile mode visible), sidebar JANGAN pernah icon-only */
  #home-sidebar-wrap.home-sidebar.drawer-open,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly.drawer-open,
  .home-sidebar.drawer-open,
  .home-sidebar.sidebar-icononly.drawer-open {
    width: min(78vw, 360px) !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
  }
}

/* SAFETY OVERRIDE: jika drawer-open (mobile mode visible), sidebar JANGAN pernah icon-only */
  #home-sidebar-wrap.home-sidebar.drawer-open,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly.drawer-open,
  .home-sidebar.drawer-open,
  .home-sidebar.sidebar-icononly.drawer-open {
    width: min(78vw, 360px) !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
  }
}

/* Backdrop drawer (mobile) – SPINDEX style: STOP di atas bottom-nav */
.drawer-backdrop {
  position: fixed;
  inset: var(--nav-header-height) 0 0 0;
  z-index: calc(var(--nav-sidebar-z) - 1);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}
@media (max-width: 1023px) {
  .drawer-backdrop {
    bottom: var(--mobile-bottom-height, 72px);
    background: rgba(10, 12, 30, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}
.drawer-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}




/* =========================================================
   [MIGRATED] VISUAL STYLES (GLOBAL)
   sb-link, section-title, icon-badge 48px gradient border, sb-label, sb-divider.
   Dipakai BOTH desktop + mobile drawer.
   ========================================================= */
/* =======================================================================
   [MIGRATED] VISUAL SIDEBAR LINKS + ICON BADGES
   -----------------------------------------------------------------------
   Ini TAMPILAN VISUAL sidebar: section title, link, icon, active state.
   Ikut style SPINDE (dari contoh user).
   ======================================================================= */

/* ---- Card wrapper group (FLAT / TRANSPARAN - tanpa border-radius) ----- */
#home-sidebar-wrap .sb-group-card,
.home-sidebar .sb-group-card,
.home-sidebar .home-sidebar-card {
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 100% !important;
  gap: 0 !important;
}

/* ---- Section Title (DISCOVER, TRACKING, TOOLS, LIVE CASINO style SPINDEX) ----- */
#home-sidebar-wrap .sb-section-title,
.home-sidebar .sb-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 18px 10px 20px;
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: #7c87a3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Chevron toggle section title (HANYA DESKTOP ≥1024px) — mobile SPINDEX TANPA chevron */
#home-sidebar-wrap .sb-section-title::after,
.home-sidebar .sb-section-title::after {
  content: "›";
  color: #7c87a3;
  font-size: 1rem;
  transition: transform 180ms ease;
}
#home-sidebar-wrap .sb-section-title[data-open="true"]::after,
.home-sidebar .sb-section-title[data-open="true"]::after {
  transform: rotate(90deg);
}
@media (max-width: 1023px) {
  #home-sidebar-wrap .sb-section-title::after,
  .home-sidebar .sb-section-title::after,
  #home-sidebar-wrap .sb-sec-chevron,
  .home-sidebar .sb-sec-chevron,
  #home-sidebar-wrap .sb-section-toggle svg,
  .home-sidebar .sb-section-toggle svg {
    display: none !important;
  }
}

/* ---- Nav Link (sb-link) ----- */
#home-sidebar-wrap .sb-link,
.home-sidebar .sb-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  margin: 2px 8px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 500;
  color: #e2e8f0;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  width: calc(100% - 16px);
  box-sizing: border-box;
}

#home-sidebar-wrap .sb-link:hover,
.home-sidebar .sb-link:hover {
  background: rgba(124, 92, 255, 0.08);
  color: #ffffff;
}

#home-sidebar-wrap .sb-link.is-active,
#home-sidebar-wrap .sb-link[aria-current="page"],
.home-sidebar .sb-link.is-active,
.home-sidebar .sb-link[aria-current="page"] {
  background: rgba(124, 92, 255, 0.16);
  color: #ffffff;
  border-color: rgba(236, 72, 153, 0.28);
}

/* ==========================================================
   ICON BADGE (rounded square dengan border gradient)
   Persis seperti contoh "Home": outer border pink→ungu,
   inner bg gelap, ikon di tengah dengan gradient.
   ========================================================== */
#home-sidebar-wrap .sb-icon-badge,
.home-sidebar .sb-icon-badge {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-image:
    linear-gradient(135deg, rgba(29, 20, 68, 0.95), rgba(29, 20, 68, 0.95)),
    linear-gradient(135deg, #ff4d9d, #7c5cff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 2px 10px rgba(124, 92, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

#home-sidebar-wrap .sb-icon-badge::before,
.home-sidebar .sb-icon-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 77, 157, 0.15), transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(124, 92, 255, 0.22), transparent 50%);
  pointer-events: none;
  opacity: 0.9;
}

#home-sidebar-wrap .sb-is-active .sb-icon-badge,
.home-sidebar .sb-is-active .sb-icon-badge,
#home-sidebar-wrap .sb-link.is-active .sb-icon-badge,
.home-sidebar .sb-link.is-active .sb-icon-badge {
  box-shadow:
    0 4px 18px rgba(236, 72, 153, 0.22),
    0 0 0 1px rgba(255, 77, 157, 0.25) inset;
}

/* Icon di dalam badge: dikasih stacking z-index di atas ::before gradient overlay */
#home-sidebar-wrap .sb-ic,
.home-sidebar .sb-ic {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#home-sidebar-wrap .sb-ic svg,
.home-sidebar .sb-ic svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Label text (sb-label) — RAPIHKAN: bold, besar, putih terang */
#home-sidebar-wrap .sb-label,
.home-sidebar .sb-label {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  color: #f8fafc;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}

#home-sidebar-wrap .sb-link.is-active .sb-label,
.home-sidebar .sb-link.is-active .sb-label {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(124, 92, 255, 0.25);
}

/* ⚠️ DESKTOP ICON-ONLY MODE RULES PINDAH KE:
   d:\GitHub\CMS4\shared-assets\navigation\menu\desktop-sidebar.css
   (blok @media min-width:1024px, tepat setelah L107-L124 ICON-ONLY 64px).
   Disini MOBILE CSS FILE (max-width 1023px SAJA), JANGAN declare ≥1024px disini
   (selalu specificity kalah dari desktop-sidebar.css!). */

/* =========================================================================
   ⭐⭐⭐ MOBILE DRAWER FIX 100% LABEL TERLIHAT + TIDAK KECIL 64px
   Penyebab bug user "di mobile jadi beratakan juga mengecil" = class
   .sidebar-icononly TERTINGGAL dari desktop resize/rotate, lalu di mobile
   CSS rules desktop-sidebar.css (lebih awal di-load) yang min-width:64px
   menang specificity.
   SOLUSI: @media max-width 1023px FORCE OVERRIDE .sidebar-icononly
   agar TIDAK PERNAH hide label / TIDAK PERNAH width 64px di mobile sekalipun
   class ada (toggle.js sudah guard, ini double guard CSS).
   ========================================================================= */
@media (max-width: 1023px) {
  /* 1) SIDEBAR ITSELF: NEVER 64px! Override width ke drawer size default 85vw min 320px */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly,
  body.sidebar-iconmode #home-sidebar-wrap,
  body.sidebar-icononly #home-sidebar-wrap,
  .home-sidebar.sidebar-icononly {
    width: 85vw !important;
    max-width: 360px !important;
    min-width: 320px !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: translateX(0) !important;
  }
  /* 2) OVERRIDE HIDE RULES dari desktop-sidebar.css .sidebar-icononly:
     SEMUA LABEL, SECTION TITLE, CHEVRON = FORCE TERLIHAT 100% */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-label,
  body.sidebar-iconmode .sb-label,
  body.sidebar-icononly .sb-label,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-section-title,
  body.sidebar-iconmode .sb-section-title,
  body.sidebar-icononly .sb-section-title,
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-sec-chevron,
  body.sidebar-iconmode .sb-sec-chevron {
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: revert !important;
    margin: revert !important;
    overflow: visible !important;
    display: inline !important;
    pointer-events: auto !important;
    clip-path: none !important;
  }
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-section-title::after,
  body.sidebar-iconmode .sb-section-title::after,
  body.sidebar-icononly .sb-section-title::after {
    display: block !important;
    opacity: 1 !important;
    content: "›" !important;
  }
  /* 3) SB-LINK: GAP normal left-align, TIDAK CENTER (center hanya desktop icon only) */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-link,
  body.sidebar-iconmode .sb-link,
  body.sidebar-icononly .sb-link {
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 8px 16px !important;
    margin: 2px 10px !important;
    gap: 18px !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    text-align: left !important;
    display: flex !important;
  }
  /* 4) SB-ICON-BADGE: margin KIRI 0 (jadikan icon di kiri, text di kanan) */
  #home-sidebar-wrap.home-sidebar.sidebar-icononly .sb-icon-badge,
  body.sidebar-iconmode .sb-icon-badge,
  body.sidebar-icononly .sb-icon-badge {
    margin: 0 18px 0 0 !important;
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
  /* 5) DRAWER-BACKDROP mobile DIPERBOLEHKAN visible (BLUR 4px yang SEHARUSNYA cuma untuk drawer overlay) */
  .drawer-backdrop { display: block !important; }
  .drawer-backdrop.is-visible { opacity: 1 !important; visibility: visible !important; backdrop-filter: blur(4px) saturate(140%) brightness(92%) !important; -webkit-backdrop-filter: blur(4px) saturate(140%) brightness(92%) !important; }
}


/* =========================================================
   [MIGRATED] MOBILE DRAWER SAFETY + VISUAL OPTIM (≤1023px)
   Safety drawer-open full-label visible, badge 26px, label 14px bold, etc.
   ========================================================= */
/* =====================================================================
   SAFETY MOBILE SPINDEX OVERRIDE: drawer-open SELALU full-label VISIBLE
   (menumbangkan semua .sidebar-icononly hide rules yang tertinggal)
   ===================================================================== */
@media (max-width: 1023px) {
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-link,
  .home-sidebar.drawer-open .sb-link {
    justify-content: flex-start !important;
    padding: 0px 12px !important;
    margin: 0px 8px !important;
    gap: 20px !important;
  }
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-label,
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-section-title,
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-link span,
  .home-sidebar.drawer-open .sb-label,
  .home-sidebar.drawer-open .sb-section-title,
  .home-sidebar.drawer-open .sb-link span {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: inline !important;
  }
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-link span:not(.sb-ic-wrap):not(.sb-ic):not(.sb-link-icon):not(.sb-icon-badge),
  .home-sidebar.drawer-open .sb-link span:not(.sb-ic-wrap):not(.sb-ic):not(.sb-link-icon):not(.sb-icon-badge) {
    display: inline !important;
  }
}

/* =====================================================================
   MOBILE-SPECIFIC VISUAL OPTIMIZATION (≤1023px) — DRAWER OPEN MODE
   Specificity DITAIKAN (.home-sidebar.drawer-open, #home-sidebar-wrap.drawer-open)
   + SEMUA value !important agar 100% override CSS desktop / inline / cache
   ===================================================================== */
@media (max-width: 1023px) {
  /* ==== FORCE section header DISCOVER / LIVE CASINO SELALU TERLIHAT (LINE-HEIGHT 1.0 - TIDAK BOLEH BESAR!) ==== */
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-section-title,
  #home-sidebar-wrap.home-sidebar .sb-section-title,
  .home-sidebar.drawer-open .sb-section-title,
  .home-sidebar .sb-section-title {
    padding: 0px 18px 0px 20px !important;
    margin: 0 !important;
    font-size: 0.64rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* ==== FORCE BADGE IKON UKURAN 26px (hemat 2px ×8 = 16px + label kecil = total ~70px hemat) ==== */
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-icon-badge,
  #home-sidebar-wrap.home-sidebar .sb-icon-badge,
  .home-sidebar.drawer-open .sb-icon-badge,
  .home-sidebar .sb-icon-badge {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-icon-badge::before,
  #home-sidebar-wrap.home-sidebar .sb-icon-badge::before,
  .home-sidebar.drawer-open .sb-icon-badge::before,
  .home-sidebar .sb-icon-badge::before {
    border-radius: 6px !important;
  }

  /* ==== FORCE IKON DI DALAM BADGE 15px ==== */
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-ic,
  #home-sidebar-wrap.home-sidebar .sb-ic,
  .home-sidebar.drawer-open .sb-ic,
  .home-sidebar .sb-ic {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
  }

  /* ==== FORCE LABEL 14px BOLD line-height 1.0 (hemat tinggi item) + GAP 20px tetap (tidak nempel) ==== */
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-label,
  #home-sidebar-wrap.home-sidebar .sb-label,
  .home-sidebar.drawer-open .sb-label,
  .home-sidebar .sb-label {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    padding-left: 2px !important;
    line-height: 1.0 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* ==== FORCE Home S-Logo SVG size 16px (muat di badge 26px) ==== */
  #home-sidebar-wrap.home-sidebar.drawer-open .sb-ic svg[width="26"],
  #home-sidebar-wrap.home-sidebar .sb-ic svg[width="26"],
  .home-sidebar.drawer-open .sb-ic svg[width="26"],
  .home-sidebar .sb-ic svg[width="26"] {
    width: 16px !important;
    height: 16px !important;
  }
}